<template>
  <!--头部-->
  <div class="header">
    <!--轮播-->
    <div class="cast">
      <div class="top" ref="top">
        <!--搜索框-->
        <input type="text" class="search" placeholder="玩具" @click="search">
        <!--导航栏-->
        <div class="naves">
          <div class="nav" ref="bs">
            <ul>
              <li v-for="(val, key) in nav" :key="key">{{val}}</li>
              <li id="nav_line"></li>
            </ul>
          </div>
          <div class="nav_click"  @click.stop="navisShow">
            <p></p>
          </div>
        </div>
      </div>
    </div>
    <div class="warns" v-if="warn">
      <div class="warn">
        <p>全部分类</p>
        <div class="warn_right" @click="warnisShow">
          <p></p>
        </div>
      </div>
      <div class="freight">
        <div class="parse" v-for="(val, key) in itemize" :key="key">
          <img :src="val.img" alt="">
          <p>{{val.title}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'top',
  data () {
    return {
      nav: ['精选', '食品', '母婴', '家居', '女装', '生活用品', '精选', '食品', '母婴', '家居'],
      warn: false,
      swiperOption: {
        autoplay: {
          delay: 3000,
          // 用户操作之后是否禁止
          disableOnInteraction: false
        },
        loop: true,
        preventLinksPropagation: false,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'bullets'
        }
      },
      swiperSlides: [
        {img: require('./image/banner/155905092269162676_wps.png')},
        {img: require('./image/banner/0656d00fcccc4a618eee1f4811fddc7b_th.jpg')},
        {img: require('./image/banner/8e54925342144841a82058a7d825c07a.jpg')},
        {img: require('./image/banner/64f433861ebe4e3b917b25c84d3b7953.jpg')},
        {img: require('./image/banner/3ea58547dfe54657bac3e079ee86fae2.jpg')}
      ],
      active: [
        {img: require('./image/banner/155921683498601203.png')},
        {img: require('./image/banner/155921685876387844.png')}
      ],
      itemize: [
        {title: '精选', img: require('./image/icons/155745615565685465.png')},
        {title: '食品', img: require('./image/icons/155745620576685615.png')},
        {title: '母婴', img: require('./image/icons/155745615565685465.png')},
        {title: '家居', img: require('./image/icons/155745620576685615.png')},
        {title: '女装', img: require('./image/icons/155745615565685465.png')},
        {title: '生鲜', img: require('./image/icons/155745620576685615.png')},
        {title: '小家电', img: require('./image/icons/155745615565685465.png')},
        {title: '美妆个护', img: require('./image/icons/155745620576685615.png')},
        {title: '男装', img: require('./image/icons/155745615565685465.png')},
        {title: '家纺', img: require('./image/icons/155745620576685615.png')},
        {title: '手机电脑', img: require('./image/icons/155745615565685465.png')},
        {title: '大家电', img: require('./image/icons/155745620576685615.png')},
        {title: '家装', img: require('./image/icons/155745615565685465.png')},
        {title: '车品', img: require('./image/icons/155745620576685615.png')},
        {title: '苏宁极物', img: require('./image/icons/155745615565685465.png')},
        {title: '鞋包', img: require('./image/icons/155745620576685615.png')},
        {title: '绿植宠物', img: require('./image/icons/155745615565685465.png')},
        {title: '内衣', img: require('./image/icons/155745620576685615.png')},
        {title: '珠宝配饰', img: require('./image/icons/155745615565685465.png')},
        {title: '运动户外', img: require('./image/icons/155745620576685615.png')},
        {title: '图书', img: require('./image/icons/155745620576685615.png')}
      ]
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  methods: {
    navisShow () {
      this.warn = !this.warn
    },
    warnisShow () {
      this.warn = false
    },
    search () {
      this.$router.push({path: '/search'})
    }
  },
  mounted: function () {
    this.$nextTick(() => {
      let bs = this.$refs.bs
      let scroll = new BScroll(bs, {
        click: true,
        scrollX: true
      })
      return scroll
    })
  }
}
</script>

<style scoped lang="scss">
  .header{
    overflow: hidden;
    .cast{
      .top {
        height: 275px;
        position: fixed;
        top: 0;
        z-index: 999;
        .search {
          width: 1165px;
          height: 105px;
          background: #ffffff;
          border: none;
          border-radius: 45px;
          display: inline-block;
          margin: 30px 0 0 35px;
          text-indent: 40px;
        }
        input::placeholder {
          background: url("image/icons/search.png") no-repeat 42%;
          background-size: 5%;
          color: #b4b4b4;
          text-align: center;
          font-size: 40px;
        }
        .naves {
          width: 100vw;
          height: 140px;
          display: flex;
          .nav {
            width: 90vw;
            overflow: hidden;
            height: 140px;
            display: inline-block;
            ul {
              width: 120vw;
              height: 140px;
              font-size: 0;
              position: relative;
              li {
                width: 200px;
                height: 140px;
                font-size: 50px;
                text-align: center;
                display: inline-block;
                line-height: 140px;
                color: #ffffff;
                list-style-type: none;
              }
              #nav_line{
                width: 50px;
                height: 1px;
                border-bottom: solid 5px;
                position: absolute;
                top: 130px;
                left: 75px;
                z-index: 999;
              }
            }
          }
          .nav_click {
            width: 10vw;
            height: 140px;
            position: absolute;
            right: 0;
            z-index: 999;
            p {
              width: 26px;
              height: 26px;
              border: solid 3px #ffffff;
              margin: 50px 40px 50px 40px;
              transform: rotate(45deg);
              border-left: none;
              border-top: none;
            }
          }
        }
      }
    }
    .warns{
      width: 100vw;
      height: 1614px;
      background: white;
      border-bottom-right-radius: 50px;
      border-bottom-left-radius: 50px;
      position: absolute;
      top: 180px;
      z-index: 9999;
      .warn{
        line-height: 96px;
        padding-left: 35px;
        position: relative;
        box-sizing: border-box;
        display: flex;
        border-bottom: solid 1px #f2f2f2;
        p{
          font-size: 54px;
          color: #808080;
        }
        .warn_right{
          width: 96px;
          height: 96px;
          position: absolute;
          right: 30px;
          p{
            width: 26px;
            height: 26px;
            border: solid 3px #a2a2a2;
            margin: 40px 0 0 36px;
            transform: rotate(45deg);
            border-bottom: none;
            border-right: none;
          }
        }
      }
      .freight{
        height: 1518px;
        box-sizing: border-box;
        padding: 69px 120px 0 120px;
        .parse{
          width: 196px;
          height: 270px;
          display: inline-block;
          img{
            width: 120px;
            height: 120px;
            margin-left: 40px;
          }
          p{
            text-align: center;
            font-size: 21px;
          }
        }
      }
    }
  }
</style>
